<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生主页面</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="navbar">

        <a href = "https://www.nuit.edu.cn">
        <img src ="https://www.nuit.edu.cn/content/main/base/img/logo.png" alt="LOGO"> 
        </a>
        
        <div class="user-info">
            <span>张三</span>
            <button id="logout-btn">退出登录</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#"><i class="fas fa-tachometer-alt"></i>仪表盘</a></li>
                <li><a href="#"><i class="fas fa-flask"></i>实验查看</a></li>
                <li><a href="#" id="upload-link"><i class="fas fa-file-upload"></i>作业提交</a></li>
                <li><a href="http://localhost:3000"><i class="fa-brands fa-youtube"></i>教学视频播放</a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i>成绩查询</a></li>
                <li><a href="#"><i class="fas fa-bell"></i>通知公告</a></li>
                <li><a href="#"><i class="fas fa-question-circle"></i>帮助与反馈</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <div class="dashboard">
                <div class="card">
                    <h3>个人信息</h3>
                    <p>姓名：张三</p>
                    <p>班级：班级1</p>
                    <p>学号：20230001</p>
                </div>
                <div class="card">
                    <h3>快捷操作</h3>
                    <button>查看实验</button>
                    <button id="upload-btn">提交作业</button>
                    <button>查看成绩</button>
                </div>
                <div class="card">
                    <h3>系统状态</h3>
                    <p>未读通知：1条</p>
                    <p>待提交作业：2份</p>
                </div>
            </div>
            <h3>实验任务列表</h3>
            <table class="experiment-table">
                <thead>
                    <tr><th>实验编号</th><th>实验名称</th><th>截止时间</th><th>提交状态</th><th>成绩</th><th>操作</th></tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="exp1.html">实验1</a></td> 
                        <td>数据表示与运算实验</td>
                        <td>2023-10-15</td>
                        <td>已提交</td>
                        <td>85</td>
                        <td><button class="action-button">查看详情</button></td>
                    </tr>
                    <tr>
                        <td>实验2</td>
                        <td>BombLab实验</td>
                        <td>2023-10-22</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp2">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验3</td>
                        <td>AttackLab实验</td>
                        <td>2023-10-29</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp3">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验4</td>
                        <td>LinkLab实验</td>
                        <td>2023-11-05</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp4">提交作业</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="floating-btn" id="floating-upload-btn"><i class="fas fa-cloud-upload-alt"></i></div>

    <div class="upload-container" id="upload-container">
        <div class="upload-box" id="upload-box">

            <div class="upload-header">
                <h2>上传作业文件</h2>
            </div>

            <button class="close-btn" id="close-upload"><i class="fas fa-times"></i></button>

            <div class="preview-container" id="preview-container">
                <div class="preview-placeholder">将文件拖拽到此处或点击"选择文件"</div>
                <img id="image-preview" alt="图片预览">
                <video id="video-preview" controls></video>
            </div>

            <input type="file" id="file-input" class="file-input" accept="image/*,video/*">

            <div class="upload-buttons">
                <button class="select-file-btn" id="select-file-btn">选择文件</button>
                <button class="upload-btn" id="upload-file-btn">上传文件</button>
            </div>

        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
































































































































































































































































































































































































































































































































































































































































































































<!-- <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生主页面</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
       :root {
            --primary-color: #6ec3c1;
            --secondary-color: #819ff39f;
            --accent-color: #fce38a;
            --light-color: #eaffd0;
            --dark-color: #333;
            --white: #fff;
            --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            --blur-bg: rgba(255, 255, 255, 0.8);
        }

        * { margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
            }

        body { 
                font-family: 'Noto Sans SC', sans-serif; 
                background-color: #f9f9f9; 
                color: var(--dark-color); 
                line-height: 1.6; 
                }

        .navbar { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow); color: var(--white); }
        .navbar img { height: 40px; }
        .user-info { display: flex; align-items: center; gap: 20px; }
        .user-info span { font-weight: 500; }
        .user-info button { background-color: var(--white); color: var(--primary-color); border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; }
        .user-info button:hover { background-color: var(--light-color); transform: translateY(-2px); }
        .container { display: flex; min-height: calc(100vh - 70px); }
        .sidebar { width: 220px; background-color: var(--white); padding: 20px 0; box-shadow: var(--shadow); }
        .sidebar ul { list-style: none; }
        .sidebar a { display: block; padding: 12px 25px; color: var(--dark-color); text-decoration: none; border-left: 4px solid transparent; transition: all 0.3s ease; }
        .sidebar a:hover { background-color: rgba(110,195,193,0.1); border-left: 4px solid var(--primary-color); color: var(--primary-color); }
        .main-content { flex: 1; padding: 30px; background-color: #f5f7fa; }
        .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 20px; margin-bottom: 30px; }
        .card { background-color: var(--white); border-radius: 10px; padding: 20px; box-shadow: var(--shadow); transition: transform 0.3s ease; }
        .card:hover { transform: translateY(-5px); }
        .card h3 { color: var(--primary-color); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
        .card button { background-color: var(--primary-color); color: white; border: none; padding: 8px 15px; border-radius: 5px; margin-right: 10px; cursor: pointer; transition: all 0.3s ease; }
        .card button:hover { background-color: var(--secondary-color); transform: translateY(-2px); }
        .experiment-table { width: 100%; border-collapse: collapse; background-color: var(--white); box-shadow: var(--shadow); border-radius: 10px; overflow: hidden; }
        .experiment-table th, .experiment-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; }
        .experiment-table th { background-color: var(--primary-color); color: white; font-weight: 500; }
        .experiment-table tr:hover { background-color: rgba(110,195,193,0.1); }
        .action-button { background-color: var(--accent-color); color: var(--dark-color); border: none; padding: 6px 12px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; }
        .action-button:hover { background-color: var(--secondary-color); color: white; transform: translateY(-2px); }
        .upload-container { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; }
        .upload-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--blur-bg); backdrop-filter: blur(10px); padding: 30px; border-radius: 15px; width: 500px; max-width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); text-align: center; cursor: move; }
        .upload-header { padding: 15px 20px; margin: -30px -30px 20px -30px; border-radius: 15px 15px 0 0; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; cursor: move; user-select: none; }
        .upload-box h2 { color: #000; margin-bottom: 20px; }
        .preview-container { width: 100%; height: 250px; border: 2px dashed var(--primary-color); border-radius: 10px; margin-bottom: 20px; display:flex; justify-content:center; align-items:center; overflow:hidden; position:relative; }
        .preview-placeholder { color: var(--primary-color); font-size: 16px; }
        .preview-container img, .preview-container video { max-width: 100%; max-height: 100%; display: none; }
        .upload-buttons { display: flex; justify-content: space-between; }
        .file-input { display: none; }
        .select-file-btn, .upload-btn { padding: 10px 20px; border: none; border-radius: 30px; cursor: pointer; font-weight: 500; transition: all 0.3s ease; font-size: 16px; }
        .select-file-btn { background-color: var(--primary-color); color: white; }
        .select-file-btn:hover { transform: translateY(-2px); }
        .upload-btn { background-color: var(--secondary-color); color: white; }
        .upload-btn:hover { transform: translateY(-2px); }
        .close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 20px; color: var(--secondary-color); cursor: pointer; }
        @media (max-width:768px) { .container{flex-direction:column;} .sidebar{width:100%;padding:10px 0;} .sidebar ul{display:flex;overflow-x:auto;} .sidebar a{padding:10px 15px;border-left:none;border-bottom:3px solid transparent;} .sidebar a:hover{border-bottom:3px solid var(--primary-color);} }
        @keyframes fadeIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
        .card, .experiment-table{animation:fadeIn 0.5s ease-out;}
        .floating-btn{position:fixed;bottom:30px;right:30px;width:60px;height:60px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));border-radius:50%;display:flex;justify-content:center;align-items:center;color:white;font-size:24px;box-shadow:0 5px 15px rgba(0,0,0,0.2);cursor:pointer;z-index:101;transition:all 0.3s ease;}
        .floating-btn:hover{transform:scale(1.1) translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.3);}
    </style>
</head>
<body>
    <div class="navbar">
        <img src="https://www.nuit.edu.cn/content/main/base/img/logo.png" alt="LOGO">
        <div class="user-info">
            <span>张三</span>
            <button id="logout-btn">退出登录</button>
        </div>
    </div>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#"><i class="fas fa-tachometer-alt"></i>仪表盘</a></li>
                <li><a href="#"><i class="fas fa-flask"></i>实验查看</a></li>
                <li><a href="#" id="upload-link"><i class="fas fa-file-upload"></i>作业提交</a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i>成绩查询</a></li>
                <li><a href="#"><i class="fas fa-bell"></i>通知公告</a></li>
                <li><a href="#"><i class="fas fa-question-circle"></i>帮助与反馈</a></li>
            </ul>
        </div>
        <div class="main-content">
            <div class="dashboard">
                <div class="card">
                    <h3>个人信息</h3>
                    <p>姓名：张三</p>
                    <p>班级：班级1</p>
                    <p>学号：20230001</p>
                </div>
                <div class="card">
                    <h3>快捷操作</h3>
                    <button>查看实验</button>
                    <button id="upload-btn">提交作业</button>
                    <button>查看成绩</button>
                </div>
                <div class="card">
                    <h3>系统状态</h3>
                    <p>未读通知：1条</p>
                    <p>待提交作业：2份</p>
                </div>
            </div>
            <h3>实验任务列表</h3>
            <table class="experiment-table">
                <thead>
                    <tr>
                        <th>实验编号</th>
                        <th>实验名称</th>
                        <th>截止时间</th>
                        <th>提交状态</th>
                        <th>成绩</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="exp1.html">实验1</a></td>
                        <td>数据表示与运算实验</td>
                        <td>2023-10-15</td>
                        <td>已提交</td>
                        <td>85</td>
                        <td><button class="action-button">查看详情</button></td>
                    </tr>
                    <tr>
                        <td>实验2</td>
                        <td>BombLab实验</td>
                        <td>2023-10-22</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp2">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验3</td>
                        <td>AttackLab实验</td>
                        <td>2023-10-29</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp3">提交作业</button></td>
                    </tr>
                    <tr>
                        <td>实验4</td>
                        <td>LinkLab实验</td>
                        <td>2023-11-05</td>
                        <td>未提交</td>
                        <td>-</td>
                        <td><button class="action-button" id="upload-exp4">提交作业</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="floating-btn" id="floating-upload-btn"><i class="fas fa-cloud-upload-alt"></i></div>
    <div class="upload-container" id="upload-container">
        <div class="upload-box" id="upload-box">
            <div class="upload-header"><h2>上传作业文件</h2></div>
            <button class="close-btn" id="close-upload"><i class="fas fa-times"></i></button>
            <div class="preview-container" id="preview-container">
                <div class="preview-placeholder">请选择图片或视频文件</div>
                <img id="image-preview" alt="图片预览">
                <video id="video-preview" controls></video>
            </div>
            <input type="file" id="file-input" class="file-input" accept="image/*,video/*">
            <div class="upload-buttons">
                <button class="select-file-btn" id="select-file-btn">选择文件</button>
                <button class="upload-btn" id="upload-file-btn">上传文件</button>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            // 退出登录跳转
            $('#logout-btn').on('click', function() {
                window.location.href = 'login.html';
            });
            // 拖拽逻辑
            var isDragging = false, offsetX, offsetY;
            $('.upload-header').on('mousedown', function(e) {
                isDragging = true;
                var box = $('#upload-box');
                offsetX = e.clientX - box.offset().left;
                offsetY = e.clientY - box.offset().top;
                e.preventDefault();
            });
            $(document).on('mousemove', function(e) {
                if(isDragging) {
                    $('#upload-box').css({ left: e.clientX-offsetX, top: e.clientY-offsetY, transform: 'none' });
                }
            }).on('mouseup', function() { isDragging = false; });
            // 显示/隐藏弹窗
            function showUploadModal() { $('#upload-container').fadeIn(); $('body').css('overflow','hidden'); $('#upload-box').css({left:'50%',top:'50%',transform:'translate(-50%,-50%)'});
            }
            function hideUploadModal() { $('#upload-container').fadeOut(); $('body').css('overflow','auto'); resetPreview(); }
            function resetPreview() { $('#file-input').val(''); $('#image-preview').hide(); $('#video-preview').hide(); $('.preview-placeholder').show(); }
            $('#upload-btn,#upload-link,#floating-upload-btn,#upload-exp2,#upload-exp3,#upload-exp4').on('click', function(e){e.preventDefault();showUploadModal();});
            $('#close-upload').on('click', hideUploadModal);
            $('#upload-container').on('click', function(e){ if(e.target===this) hideUploadModal(); });
            // 文件预览
            $('#select-file-btn').on('click', function(){ $('#file-input').click(); });
            $('#file-input').on('change', function(e){
                var file = this.files[0]; if(!file) return;
                $('.preview-placeholder').hide();
                $('#image-preview,#video-preview').hide();
                if(file.type.startsWith('image/')){
                    var reader=new FileReader(); reader.onload=function(e){$('#image-preview').attr('src',e.target.result).show();}; reader.readAsDataURL(file);
                } else if(file.type.startsWith('video/')){
                    $('#video-preview').attr('src',URL.createObjectURL(file)).show();
                } else { $('.preview-placeholder').text('请选择图片或视频文件').show(); }
            });
            // 上传
            $('#upload-file-btn').on('click', function(){
                var fi=$('#file-input')[0]; if(!fi.files.length){alert('请先选择文件');return;}
                var fd=new FormData(); var f=fi.files[0]; fd.append('file',f);
                var now=new Date(), ds=now.getFullYear()+'-'+(now.getMonth()+1)+'-'+now.getDate();
                fd.append('folder',ds+'-1234'); // 示例用户名
                $(this).html('<i class="fas fa-spinner fa-spin"></i> 上传中...').prop('disabled',true);
                $.ajax({ url:'ftp_upload.php', type:'POST', data:fd, processData:false, contentType:false,
                    success:function(){ alert('上传成功'); hideUploadModal(); $('#upload-file-btn').html('上传文件').prop('disabled',false); },
                    error:function(x,s,e){ alert('上传失败:'+e); $('#upload-file-btn').html('上传文件').prop('disabled',false); }
                });
            });
        });
    </script>
</body>
</html> -->



